<template>
  <j-modal
    class="form-design-style nonePadding"
    :visible.sync="modal.visible"
    :width="1200"
    :footer=null
    :title=null
    :closable=false
    :fullscreen.sync="modal.fullscreen"
    :switchFullscreen="modal.switchFullscreen">
    <template>
      <div class="formDesignPage">
        <k-form-design ref='kfd' @save="handleSave" @close="handleClose" :title="modal.title"/>
      </div>
    </template>
  </j-modal>
</template>


<script>
  import {mapState} from 'vuex'
  import {getBpmForm, saveBpmFormDesign,getTableFields} from '@/api/api'
  import {getTableFieldTree} from "../../../../api/api";

  export default {
    name: 'FormDesign',
    computed: {
      ...mapState('setting', ['pageMinHeight']),
    },
    data() {
      return {
        modal: {
          title: '表单设计',
          visible: false,
          fullscreen: true,
          switchFullscreen: false,
        },
        visible: false,
        model: {},
        id: null,
        jsonData: {
          "list": [],
          "config": {
            "layout": "horizontal",
            "labelCol": {
              "xs": 4,
              "sm": 4,
              "md": 4,
              "lg": 4,
              "xl": 4,
              "xxl": 4
            },
            "wrapperCol": {
              "xs": 18,
              "sm": 18,
              "md": 18,
              "lg": 18,
              "xl": 18,
              "xxl": 18
            },
            "hideRequiredMark": false,
            "customStyle": ""
          }
        },
        tableFields: [
          {
            label:"字段1",
            value:"1"
          },
          {
            label:"字段2",
            value:"2"
          }
        ],
      }
    },
    methods: {
      edit(record) {
        let that = this;
        that.id = record.id;
        that.modal.visible = true;
        that.model = Object.assign({}, record);
        that.$nextTick(() => {
          that.resetData();
          that.initData(this.model);
        });
      },
      resetData() {
        this.$refs.kfd.handleSetData(this.jsonData)
      },
      initData(record) {
        let jsonData = record.html;
        if (jsonData) {
          let jData = JSON.parse(jsonData)
          this.$refs.kfd.handleSetData(jData)
        }
        var that = this;
        that.tableFieldTree = [];
        getTableFieldTree({
          id: record.id
        }).then((res)=>{
          if(res.success){
            res.result.forEach(function(temp) {
              let isParent = temp.PARENTID ? false : true;
              let value = temp.TABLENAME ? temp.TABLENAME+"-"+temp.NAME : temp.NAME;
              let treeData = {
                id: temp.ID,
                isLeaf: isParent ? false : true,
                label:temp.MEMO+"("+temp.NAME+")",
                value: value,
                memo:temp.MEMO,
                parentId:isParent?'':temp.PARENTID,
                selectable:isParent?false:true
              }
              that.tableFieldTree.push(treeData);
            })
          }
          console.log(that.tableFieldTree)
          that.$refs.kfd.initTableFieldTree(that.tableFieldTree);
        })
      },
      handleSave(values) {
        var that = this;
        saveBpmFormDesign({
          id: this.id,
          html: values
        }).then((res) => {
          if (res.success) {
            that.$success({
              title: res.message,
              onOk() {
                that.$emit('ok');
              }
            })
          } else {
            that.$error({
              title: res.message,
            });
          }
        })
      },
      handleClose() {
        this.modal.visible = false;
      },
    }
  }
</script>